<template>
	<view class="container">
		<u-navbar :border-bottom="false" back-icon-color="#fff" :background="{ background: 'linear-gradient(to right, #A36BFF 0%, #6D4BBE 100%)' }" title="会员详情" title-color="#fff"></u-navbar>
		<view class="member-header">
			<view class="wd-flex member-header__user" @click="userDetail">
				<image class="avatar" :src="userinfo.avatar" mode="aspectFill"></image>
				<view class="wd-flex-cell">
					<view class="name">{{userinfo.username}}<u-icon class="icon" name="woman" color="#FFFFFF" size="26"></u-icon></view>
					<view class="info">{{userinfo.mobile}}</view>
				</view>
				<u-icon name="arrow-right" color="#FFFFFF" size="30" margin-left="20"></u-icon>
			</view>
			<view class="wd-flex member-header__tool">
				<u-icon class="icon" name="email" color="#fff" size="30" label="信息" label-size="26" label-color="#fff" margin-left="10"></u-icon>
				<u-icon class="icon" name="phone" color="#fff" size="30" label="电话" label-size="26" label-color="#fff" margin-left="10"></u-icon>
				<!-- <u-icon class="icon" name="../../../static/icons/icon_return-visit.png" color="#FFFFFF" size="30" label="回访" label-size="26" label-color="#fff" margin-left="10"></u-icon> -->
			</view>
		</view>
		<view class="wd-flex member-panel">
		</view>
		<view class="member-title">会员卡</view>
		<view class="member-card" @click="vipInfo(item.id)" v-for="(item,index) in memberCard" :key="index">
			<view class="member-card__state" v-if="item.expire_status==0">已过期</view>
			<view class="member-card__head" :style="{background: item.background}">
				<view class="name">{{ item.vip.name }}</view>
				<view class="nums" v-if="item.type==2">{{ item.value }}</view>
				<image class="icon" src="../../../static/icons/icon_vipcard-backdrop.png" mode="aspectFit"></image>
			</view>
			<view class="member-card__body">
				<view class="title">{{ item.vip.name }}</view>
				<view >{{ item.type==1?"时间卡":"次卡" }}</view>
				<view v-if="item.type==2">次数：{{ item.value }}</view>
				<view>有效期至：{{ item.expire_in_text }}</view>
			</view>
			<u-icon name="arrow-right" color="#D7D7D7" size="26"></u-icon>
		</view>
		
		<view class="wd-floating" @click="send_card">
			<u-icon name="plus" color="#fff" size="30" label="发会员卡" label-size="16" label-color="#fff" label-pos="bottom"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo:{},
				memberCard: []
			}
		},
		onLoad(options) {
			if(options.user_id){
				this.user_id = options.user_id;
				this.getDetail();
			}
		},
		methods: {
			getDetail(){
				var that = this;
				var user_id = that.user_id;
				if(!user_id){
					uni.showToast({title:'会员参数信息错误',icon:'none'});
					return false;
				}
				that.$core.post({url:'fitness.manage/user_detail',data:{user_id: user_id},success:(ret)=>{
					that.userinfo = ret.data;
					that.memberCard = ret.data.user_vip;
				}});
			},
			userDetail(){
				uni.navigateTo({
					url: '/pages/manage/memberInfo/memberInfo?user_id='+this.user_id
				})
			},
			vipInfo(user_vip_id){
	
				uni.navigateTo({
					url: '/pages/manage/memberCard/memberCard?user_vip_id='+user_vip_id
				})
			},
			send_card(){
				let that = this;
				uni.navigateTo({
					url: '/pages/manage/memberTools/grant?user_id='+this.user_id,
					events:{
						addCardSuccess:function(data){
							that.getDetail();
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #F6F6F6;
	}
	.member-header {
		padding: 0 24rpx;
		background: linear-gradient(to right, #A36BFF 0%, #6D4BBE 100%);
		&__user {
			padding: 24rpx 0;
			.avatar {
				display: block;
				margin-right: 40rpx;
				width: 98rpx;
				height: 98rpx;
				border-radius: 50%;
			}
			.name {
				line-height: 40rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
			.icon {
				margin-left: 10rpx;
			}
			.info {
				line-height: 40rpx;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
		&__tool {
			border-top: 1rpx rgba(255, 255, 255, 0.4) solid;
			padding: 36rpx 0;
			padding-bottom: 96rpx;
			.icon {
				margin-right: 26rpx;
			}
		}
	}
	.member-panel {
		margin: 24rpx;
		margin-top: -60rpx;
		height: 120rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		text-align: center;
		line-height: 45rpx;
		font-size: 32rpx;
		color: #333333;
		.wd-flex-cell {
			position: relative;
			&:after {
				content: "";
				position: absolute;
				top: 50%;
				right: 0;
				display: block;
				margin-top: -23rpx;
				width: 1rpx;
				height: 46rpx;
				background: #D8D8D8;
				opacity: 0.4;
			}
			&:last-child:after {
				display: none;
			}
		}
		text {
			padding-left: 14rpx;
			color: #6D4BBE;
		}
	}
	.member-title {
		padding: 0 56rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		color: #333333;
	}
	.member-card {
		position: relative;
		display: flex;
		align-items: center;
		margin: 24rpx;
		padding: 32rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		overflow: hidden;
		&__state {
			position: absolute;
			top: 0;
			right: 0;
			padding: 0 28rpx;
			background: #E6E6E6;
			line-height: 48rpx;
			font-size: 22rpx;
			color: #666666;
			border-radius: 0 0 0 24rpx;
		}
		&__head {
			position: relative;
			width: 205rpx;
			height: 132rpx;
			background: linear-gradient(131deg, #A36BFF 0%, #6D4BBE 100%);
			border-radius: 12rpx;
			.name {
				position: absolute;
				top: 18rpx;
				left: 14rpx;
				right: 14rpx;
				line-height: 38rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
			.nums {
				position: absolute;
				bottom: 18rpx;
				left: 14rpx;
				right: 14rpx;
				line-height: 25rpx;
				font-size: 18rpx;
				color: #FFFFFF;
			}
			.icon {
				position: absolute;
				bottom: 0;
				right: 0;
				display: block;
				width: 106rpx;
				height: 101rpx;
			}
		}
		&__body {
			flex: 1;
			padding: 0 22rpx;
			line-height: 34rpx;
			font-size: 24rpx;
			color: #666666;
			overflow: hidden;
			.title {
				line-height: 45rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
			}
		}
	}
</style>